<template>
  <el-cascader v-model="enumVal" :options="options" :props="propsValue" style="width: 100%" @change="handleChange" @focus="handleFocus" />
</template>
<script setup>
  import { onMounted, ref, toRefs, watch } from 'vue'
  import { commonApi } from '@/api/common'

  const props = defineProps({
    modelValue: { type: String, default: '' },
    categoryType: { type: Number, default: 0 }
  })

  const { modelValue } = toRefs(props)
  const enumVal = ref(props.modelValue)
  watch(modelValue, (newValue) => {
    enumVal.value = newValue
  })

  const emit = defineEmits(['update:modelValue'])
  const handleChange = (item) => {
    // 获取最后一个分类ID
    emit('update:modelValue', item.pop())
  }

  // 获取数据
  const options = ref([])
  const handleFocus = () => {
    commonApi.categoryList({ categoryType: props.categoryType }).then((res) => {
      options.value = res
    })
  }

  const propsValue = {
    value: 'id',
    label: 'categoryName',
    children: 'children',
    expandTrigger: 'hover',
    checkStrictly: true
  }

  onMounted(() => {
    handleFocus()
  })
</script>
